<template>
  <Transition>
    <div
      class="graph-relation2-node-tooltip"
      v-show="visible"
      :style="position"
      @mouseenter="$emit('mouseenter')"
      @mouseleave="$emit('mouseleave')"
    >
      <div class="u-head">
        <div
          class="u-logo"
        ><el-icon>
            <User />
          </el-icon>
        </div>
        <div class="u-head-right">
          <div class="u-name">{{ data.text }}</div>
          <div class="u-tags">
            <div
              v-for="item in data.tags"
              class="u-tag"
              :class="`u-${item.riskType}`"
              :style="item.style"
            >
              {{ item.text }}
            </div>
          </div>
        </div>
      </div>
      <div class="u-descs">
        <div
          class="u-row"
          v-for="item in data.descriptions"
        >
          <span>{{ item.label }}：</span>
          <span class="u-value">{{ item.value }}</span>
        </div>
      </div>
    </div>
  </Transition>
</template>

<script setup>
const props = defineProps({
  visible: Boolean,
  data: Object,
  position: Object,
})
</script>

<style lang="stylus" scoped>
.v-enter-active,
.v-leave-active {
  transition: opacity 0.3s ease;
}

.v-enter-from,
.v-leave-to {
  opacity: 0;
}
.graph-relation2-node-tooltip
  position absolute
  left 0
  top 0
  padding 16px
  width 364px
  background #fff
  box-shadow: 0px 2px 8px 0px rgba(0,0,0,0.15);
  border-radius: 4px;
  z-index 10
  .u-head
    display flex
    .u-logo
      width: 50px
      height: 50px
      line-height 50px
      background: #F5F8FC;
      border: 1px solid #EEEEEE;
      border-radius: 4px
      color: blue
      font-size 30px
      text-align: center
    .u-head-right
      flex 1
      margin-left: 8px
      .u-name
        font-size 18px
        color #27243F
        line-height 25px
      .u-tags
        display flex
        flex-wrap wrap
        margin-top 3px
        .u-tag
          margin-right 8px
          margin-bottom 8px
          padding 4px 8px
          font-size: 14px
          line-height 14px
          border-radius: 3px
          color #2970F6
          background: rgba(41,112,246,0.1)
          &.u-bad
            color #F0667F
            background: rgba(240,102,127,0.1)

  .u-descs
    font-size 14px
    color #616998
    .u-value
      color #27243F
</style>
